<template>
    <el-row class="tac">
        <el-col :span="10" >
            <div  class="qu-content">
                <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%">
                    <section class="qu-item"
                             :class="{nowEditing: curIndex === index }"
                             v-for="(item, index) in questions"
                             :key="item.realSort"
                             @click="curIndex = index; "
                    >
                        <answer_chained :id="item.type+item.realSort"
                                        v-if="item.type === 'chained'" :itemIndex="index"
                                        :isSlectThis="curIndex === index"
                                        :itemData="item"
                                        :itemUpDataAnswer = "upDataItemAnswer"
                                        :isLook="isLook"
                        ></answer_chained>
                        <answer_checkbox :id="item.type+item.realSort" v-if="item.type === 'checkbox'" :itemIndex="index"
                                         :isSlectThis="curIndex === index"
                                         :itemData="item"
                                         :itemUpDataAnswer = "upDataItemAnswer"
                                         :isLook="isLook"
                        ></answer_checkbox>
                        <answer_head v-if="item.type === 'head'"
                                     :itemData="item"
                        ></answer_head>
                        <answer_radio :id="item.type+item.realSort" v-if="item.type === 'radio'" :itemIndex="index"
                                      :isSlectThis="curIndex === index"
                                      :itemData="item"
                                      :itemUpDataAnswer = "upDataItemAnswer"
                                      :isLook="isLook"
                        ></answer_radio>
                        <answer_textarea :id="item.type+item.realSort" v-if="item.type === 'textarea'" :itemIndex="index"
                                         :isSlectThis="curIndex === index"
                                         :itemData="item"
                                         :itemUpDataAnswer = "upDataItemAnswer"
                                         :isLook="isLook"
                        ></answer_textarea>
                    </section>

                </el-scrollbar>
            </div>
        </el-col>
        <el-col :span="14" >

            <el-tabs v-model="activeName">
                <el-tab-pane label="单题统计" name="first">
                    <div>
                        <PieChart
                                :selectQueItem="selectQueItem"
                        ></PieChart>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="整体excel" name="second">

                    <div style="width: 100%;height: 600px">
                        <div class="block">
                            <span class="demonstration">问卷开始统计时间:</span>
                            <el-date-picker
                                    v-model="excelTime.startTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    class="inputBox"
                            >
                            </el-date-picker>
                        </div>
                        <p></p>
                        <p></p>
                        <p></p>
                        <p></p>
                        <p></p>
                        <p></p>
                        <div class="block">
                            <span class="demonstration">问卷结束统计时间:</span>
                            <el-date-picker
                                    v-model="excelTime.endTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    class="inputBox"
                            >
                            </el-date-picker>
                        </div>
                        <p></p>
                        <p></p>
                        <p></p>
                        <el-button
                                type="success"
                        >
                            <a class='download' :href="serverUrl+'/questionCount/getByMId?mid='+mid+'&startTime='+excelTime.startTime+'&endTime='+excelTime.endTime"  title="下载报表">下载报表</a>
                        </el-button>
                    </div>


                </el-tab-pane>
            </el-tabs>


            <div>
                <BoxCard
                :thisMoudle="thisMoudle"
                ></BoxCard>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import  {new_answer}  from '@/utils/newQuestion'
    import answer_chained from '@/views/question/viewQue/components/answer_chained'
    import answer_checkbox from '@/views/question/viewQue/components/answer_checkbox'
    import answer_head from '@/views/question/viewQue/components/answer_head'
    import answer_radio from '@/views/question/viewQue/components/answer_radio'
    import answer_textarea from '@/views/question/viewQue/components/answer_textarea'
    import { postBody,post,getPrefixUrl} from "@/utils/httpUtil";
    import BoxCard from './components/BoxCard'
    import PieChart from './components/PieChart'
    export default {
        name: "count",
        components: {
            answer_chained,
            answer_checkbox,
            answer_head,
            answer_radio,
            answer_textarea,
            BoxCard,
            PieChart
        },
        data() {
            return {
                mid:null,
                mtitle:'新建问卷',
                questions:[],
                new_answer:new_answer,
                curIndex:'',
                uid:'',
                isLook:true,
                serverUrl: getPrefixUrl(),
                thisMoudle:{
                    recovery:1,
                    pageviews:1,
                    rateRecovery:1.00
                },
                activeName: 'first',
                excelTime:{
                    startTime:'',
                    endTime:''
                }
            }
        },
        computed: {
            // 计算属性的 getter
            answerCount: function () {
                // `this` 指向 vm 实例
                return Number(this.questions.length)
            },
            title_list(){
                if(this.questions){
                    return this.questions.filter((q,index,self)=>{
                        return q.type === 'head';
                    })
                }
                return [];
            },
            selectQueItem(){
                if(this.questions[this.curIndex]){
                    return this.questions[this.curIndex]
                }
                return null
            }
        },
        methods: {
            getQetionesList() {
                let remap ={};
                remap.mid = this.mid;
                if(this.uid){
                    remap.uid =  this.uid
                }
                postBody("/questionItem/getByMIdUid", remap).then(resp => {
                    if(resp.result) {
                        let tem_questions = resp.data;
                        tem_questions.forEach((item, index) => {
                            if(item.type !== 'head'){
                                if(!item.answer){
                                    let newAn = JSON.parse(JSON.stringify(this.new_answer));
                                    newAn.mouldId = this.mid;
                                    newAn.itemId = item.id;
                                    newAn.isSelect = item.isSelect;
                                    newAn.isChildAnswer = item.isChildAnswer;
                                    newAn.isOther = item.isOther;
                                    if(this.uid){
                                        newAn.uid=this.uid;
                                    }else{
                                        newAn.uid='匿名';
                                    }
                                    item.answer = newAn
                                }else{
                                    //checkbox和chained数组化
                                    if(item.answer.options.length>36){
                                        item.answer.options =item.answer.options.split(",");
                                    }
                                }
                            }
                        });
                        this.questions = tem_questions
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '题目失败！'+resp.msg,
                            type: 'warning',
                            duration: 2000
                        })
                    }
                })
            },
            upDataItemAnswer(index,item){
                console.log('此页面不会更新')
            },
            putRateRecovery(rel_m){
                if(rel_m){
                    // 初始化请求数据和路径
                    let rowData = {};
                    rowData.id = rel_m.id;
                    rowData.rateRecovery = rel_m.rateRecovery;
                    let url = "/questionMould/update"
                    postBody(url, rowData).then(resp => {
                        if(resp.data.result) {

                        } else {
                            this.$notify({
                                title: '提示',
                                message: '更新回收率失败！'+resp.data.msg,
                                type: 'warning',
                                duration: 2000
                            })
                        }
                    })
                }

            },
            getMoudle(){
                let _this =this
                post("/questionMould/getById", {id:this.mid}).then(resp => {
                    if(resp.result) {
                        let rel_m = resp.data
                        let newNum = rel_m.recovery/rel_m.pageviews
                        let f = parseFloat(newNum);
                        if (isNaN(f)) {
                            return;
                        }
                        f = Math.round(newNum*100);
                        if(f !== rel_m.rateRecovery){
                            rel_m.rateRecovery = f;
                            this.putRateRecovery(rel_m);
                        }
                        this.thisMoudle = Object.assign({}, this.thisMoudle,rel_m)
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '统计概况失败！'+resp.msg,
                            type: 'warning',
                            duration: 2000
                        })
                    }
                })
            },

        },
        created() {
            // let q_mid = this.$route.params.mid
            // let mtitle = this.$route.params.mtitle
            // let uid = this.$route.params.uid
            // let isLook = this.$route.params.isLook

            let q_mid = this.$route.query.mid
            let mtitle = this.$route.query.mtitle
            let uid = this.$route.query.uid
            let isLook = this.$route.query.isLook


            if(q_mid){
                this.mid = q_mid
                this.mtitle = mtitle
            }
            if(uid){
                this.uid =uid
            }
            if(isLook){
                if(isLook === 'true'){
                    this.isLook = true
                }else{
                    this.isLook = false
                }
            }
            if(this.mid){
                this.getQetionesList();
                this.getMoudle()
            }

        }

    }
</script>

<style scoped lang="scss">
    .qu-content {
        padding: 2rem;
        height: 100vh;
        border: {
            top: 2px solid #bbb;
            bottom: 2px solid #bbb;
        }

        .qu-item {
            position: relative;
            margin-bottom: 1rem ;
            border-bottom:2px solid #6ca9e7;
            &.nowEditing {
                background-color: #bbb;
                border:2px dashed #000;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
            }
        }
    }
</style>
